<template>
  <div class="areas">
    <a-checkbox-group
      v-if="type === 'checkBox'"
      v-model="checkedList"
      :options="options"
      @change="change"
    />
    <a-select
      v-if="type === 'select'"
      @change="change"
      v-model="checkedList"
      :placeholder="placeholder ? placeholder : '请选择地区'"
      :mode="multiple ? 'multiple' : 'default'"
      style="width: 184px;"
    >
      <a-select-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</a-select-option
      >
    </a-select>
  </div>
</template>

<script>
import area from "@/dict/area";

export default {
  props: {
    value: {
      type: Array
    },
    placeholder: {
      type: String
    },
    type: {
      type: String,
      default: "checkBox"
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkedList: [],
      options: []
    };
  },
  watch: {
    value(n) {
      this.checkedList = n;
    }
  },
  methods: {
    change(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    init() {
      for (const key in area) {
        const val = area[key];
        let i = {
          label: val.desc,
          value: val.value
        };
        this.options.push(i);
      }
    }
  },
  created() {
    this.checkedList = this.value;
    this.init();
  }
};
</script>
